<template>
<div class="layerRtb layerRtb-threecolumn">
    <three-title :title="{name:'编辑等级'}"></three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "270">
        <div class="analyItem" v-for="(item, index) in standardList" :key="index">
            <p class="analyItemTit tx-center">{{item.grade | grade()}}</p>
            <div class="analyItemCon">
                <div v-if="item.flag === 1">
                    <p class="col-md-6">
                        <span class="cLightGray pr8">等级</span>
                        <span>{{item.grade | grade()}}</span>
                    </p>
                    <p class="col-md-6">
                        <span class="cLightGray pr8">用时</span>
                        <span>{{item.day}}天</span>
                    </p>
                    <p class="col-md-6">
                        <span class="cLightGray pr8">罚款</span>
                        <span class="cRed">{{item.fine}}元</span>
                    </p>
                    <p class="col-md-6">
                        <span class="cLightGray pr8">积分</span>
                        <span class="cRed">{{item.integral}}</span>
                    </p>
                    <p class="col-md-12">
                        <span class="cLightGray pr8">备注</span>
                        <span>{{item.remark}}</span>
                    </p>
                 </div>
                 <div v-if="item.flag === 2">
                    <p class="col-md-12 mt10">
                        <span class="cLightGray pr8 fl">等级</span>
                        <el-select v-model="item.grade" placeholder="请选择等级" class="fl">
                            <el-option
                                v-for="item in gradeOptions"
                                :key="item.grade"
                                :label="item.label"
                                :value="item.grade">
                            </el-option>
                        </el-select>
                    </p>
                    <div>
                        <p class="col-md-4 mt10">
                            <span class="cLightGray pr8">用时</span>
                            <el-input-number v-model="item.day" type="number"></el-input-number>
                        </p>
                        <p class="col-md-4 mt10">
                            <span class="cLightGray pr8">罚款</span>
                            <el-input-number v-model="item.fine" type="number"></el-input-number>
                        </p>
                        <p class="col-md-4 mt10">
                            <span class="cLightGray pr8">积分</span>
                             <el-input-number v-model="item.integral" type="number"></el-input-number>
                        </p>
                    </div>
                    <p class="col-md-12 mt10">
                        <span class="cLightGray pr8 fl">备注</span>
                        <textarea v-model="item.remark" class="col-md-11"></textarea>
                    </p>
                 </div>
                <div class="dis-il-block iconbox">
                    <img src="https://tapp.rxjy.com/common/static/images/png/edit_img.png" class="edit_img" v-if="item.flag === 1" @click="$set(item, 'flag',2)">
                    <img src="https://tapp.rxjy.com/common/static/images/ico/save_img.png"  class="save_img" v-if="item.flag === 2" @click="updateFineStandard(item)">
                    <img src="https://tapp.rxjy.com/common/static/images/ico/goback_img.png"  class="goback_img" v-if="item.flag === 2" @click="$set(item, 'flag',1)">
                </div>
            </div>
        </div>
    </div>
    <div class="layerRtb-footer">
        <div class="analyItem">
            <p class="analyItemTit tx-center">综合</p>
            <div class="analyItemCon">
                 <div v-for="(item, index) in standardList" :key="index">
                    <p class="col-md-3">
                        <span class="cLightGray pr8">等级</span>
                        <span>{{item.grade | grade()}}</span>
                    </p>
                    <p class="col-md-3">
                        <span class="cLightGray pr8">用时</span>
                        <span>{{item.day}}天</span>
                    </p>
                    <p class="col-md-3">
                        <span class="cLightGray pr8">罚款</span>
                        <span class="cRed">{{item.fine}}元</span>
                    </p>
                    <p class="col-md-3">
                        <span class="cLightGray pr8">积分</span>
                        <span class="cRed">{{item.integral}}</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
</template>
<script>
import { mapMutations, mapGetters } from 'vuex'
import { updateFineStandard } from '../../Resources/Api/index'
export default {
    data () {
        return {
            standardList: [], // 标准数组
            gradeOptions: [{
                grade: 1,
                label: '一级'
            }, {
                grade: 2,
                label: '二级'
            }, {
                grade: 3,
                label: '三级'
            }],
            gradeValue: '' // 等级Value
        }
    },
    computed: {
        ...mapGetters(['leftInfo', 'updatePlate'])
    },
    created () {
        this.standardList = this.$route.query.data
        this.standardList.forEach((item) => {
            this.$set(item, 'flag', 1)
        })
    },
    methods: {
        ...mapMutations({
            setUpDatePlate: `SET_UPDATE_PLATE`
        }),
        // 保存标准
        updateFineStandard (item) {
            if (item.grade === '') {
                this.$message('请选择等级')
                return false
            }
            if (item.day === '') {
                this.$message('请输入天数')
                return false
            }
            if (item.fine === '') {
                this.$message('请输入罚款')
                return false
            }
            if (item.integral === '') {
                this.$message('请输入积分')
                return false
            }
            let params = {
                id: item.id,
                typeId: this.leftInfo.id,
                grade: Number(item.grade),
                day: Number(item.day),
                fine: Number(item.fine),
                integral: Number(item.integral),
                remark: this.remark
            }
            // 编辑等级
            updateFineStandard({fineStandard: params}).then(results => {
                if (results.data.StatusCode === 1) {
                    this.$message('等级编辑成功')
                    this.$set(item, 'flag', 1)
                    this.setUpDatePlate()
                } else {
                    this.$message(results.data.StatusMsg)
                }
            }).catch(error => {
                console.log(error)
            })
        }
    },
    watch: {
        $route () {
            this.standardList = this.$route.query.data
            this.standardList.forEach((item) => {
                this.$set(item, 'flag', 1)
            })
        }
    },
    filters: {
        grade (index) {
            let value = ''
            switch (Number(index)) {
            case 1:
                value = '一级'
                break
            case 2:
                value = '二级'
                break
            case 3:
                value = '三级'
                break
            default:
                break
            }
            return value
        }
    }
}
</script>
